<template>
    <div>
        <el-table v-loading="loading" :data="libraryList" >       
        <el-table-column label="公司名称" align="center" prop="nickName" />
        <el-table-column label="商品名称" align="center" prop="name" />
        <el-table-column label="数量" align="center" prop="sumNumber" />
        <el-table-column label="单位" align="center" prop="specs" />
        <el-table-column label="警告" align="center">
            <template #default="scope">
                <span class="el-tag el-tag--danger el-tag--default el-tag--light"
                    v-if="scope.row.sumNumber > scope.row.goodMax">超出预警</span>
                <span class="el-tag el-tag--warning el-tag--default el-tag--light"
                    v-else-if="scope.row.sumNumber < scope.row.goodMin">补货</span>
                <span class="el-tag el-tag--success el-tag--default el-tag--light" v-else>充足</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
                <el-button link type="primary" icon="Tools" @click="openWarningDialog(scope.row)">查看预警</el-button>
                <el-button link type="primary" icon="MoreFilled" @click="openDetailsDialog(scope.row)">查看详情</el-button>
            </template>
        </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />

    <!-- 查看预警 -->
    <el-dialog :title="title1" v-model="open1" width="800px" append-to-body>
            <el-table v-loading="wpload" :data="wpList">
                <el-table-column label="商品名称" align="center" prop="name" />
                <el-table-column label="最大预计值" align="center" prop="goodMax" />
                <el-table-column label="最小预警值" align="center" prop="goodMin" />
            </el-table>
            <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm1">关闭</el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 查看详情-->
    <el-dialog :title="title2" v-model="open2" width="1050px" append-to-body>
        <el-table v-loading="orderload" :data="orderList">
                <el-table-column label="订单编号" align="center" prop="orderNo" />
                <el-table-column label="仓库名称" align="center" prop="warehouseName" />
                <el-table-column label="商品数量" align="center" prop="num" />
                <el-table-column label="入库时间" align="center" prop="serviceTime" />
                <el-table-column label="到期时间" align="center" prop="expirationTime" />
            </el-table>
            <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm2">关闭</el-button>
            </div>
        </template>
    </el-dialog>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import request from '@/utils/request';

const loading = ref(true);
const wpload = ref(true);
const orderload = ref(true);
const libraryList = ref([]);
const wpList = ref([]);
const orderList = ref([]);
const total = ref(0);
const open1 = ref(false);
const open2 = ref(false);
const title1 = ref('预警详情');
const title2 = ref('订单详情');

const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        document: null,
    },
    rules: {},
});

const { queryParams, form, rules } = toRefs(data);

function getList() {
    loading.value = true;
    request({
        url: '/library/select',
        method: 'get',
        params: queryParams.value,
    })
        .then((response) => {
            libraryList.value = response.rows;
            total.value = response.total;
            loading.value = false;
        });
}

function Warning(id) {
    wpload.value = true;
    request({
        url: '/library/selectWarning',
        method: 'get',
        params: {
            id:id
        }
    })
        .then((response) => {
            wpList.value = response.rows;
            total.value = response.total;
            wpload.value = false;
        });
}

function openWarningDialog(row) {
    // 可以在这里根据行数据设置对话框的内容或状态
    open1.value = true;
    Warning(row.id)
}

function order(id) {
    orderload.value = true;
    request({
        url: '/library/selectOrder',
        method: 'get',
        params: {
            id:id
        }
    })
        .then((response) => {
            orderList.value = response.rows;
            total.value = response.total;
            orderload.value = false;
        });
}

function openDetailsDialog(row) {
    open2.value = true;
    order(row.id)
}

function submitForm1() {
    open1.value = false;
}

function submitForm2() {
    open2.value = false;
}

getList();
</script>

<style scoped></style>